<template>
	<view class="control">
		<!-- 下半部分导航栏背景色 -->
		<!--  -->
		<view class="navBackground">
			<nav-bar :title="classInfo.class_name" color="white" bg="rgba(0,0,0,0)"></nav-bar>
			<view class="title">
				<text>{{trainInfo.train_name}}</text>
			</view>
			<view class="bottomBox">
				<view class="date">
					<van-image :src="date" mode="aspectFit" height="25rpx" width="25rpx" />
					<text>{{classInfo.already_in_class}}/{{classInfo.hour_num}}课</text>
					<text>{{classInfo.student_num}}人</text>
					<text>{{trainInfo.withArea.area_name}}</text>
				</view>
				<!-- <view class="address">
					<van-image :src="address" mode="aspectFit" height="21rpx" width="17rpx" />
					<text>大连体育馆第一泳池</text>
				</view> -->
			</view>
			<!-- 圆形进度条 -->
			<!-- <view class="circleProgress">
				<circle-progress-bar :pro="pro" size="170" border_width="15" :animate="true" border_color="orange">
					<view class="text">
						<text>{{classInfo.num}}/{{classInfo.hour_num}}课</text>
					</view>
				</circle-progress-bar>
			</view> -->
		</view>
		<!-- Tab切换部分 -->
		<view class="tabsBigBox">
			<van-tabs @click="tabClick" :active="tabIndex" sticky title-active-color="rgb(99,93,247)" color="rgb(99,93,247)">
				<van-tab title="课时">
					<!-- 课时列表 -->
					<!-- train_enum_id == 1  短训培训班-->
					<!-- train_enum_id == 2 长训-->
					<!-- train_enum_id == 3 小班-->
					<view  class="dataList" v-if="train_enum_id == 1">
						<view class="card" :class="['card-'+item.status]" :key="item" v-for="(item,index) in class_timeslist" @click="classDetails(item,index)">
							<view class="topBox">
								<view class="title">
									<text>{{item.name}} | {{item.train_content}}</text>
								</view>
							</view>
							<view class="bottomBox ">
								<!-- <view class="time-1">2021/05/10</view> -->
								<view class="time-2">{{item.course_date}} {{item.period_time}}</view>
							</view>
							<!-- <view class="todayDate " :class="['todayDate-'+index]">
								<text>今日上课</text>
							</view> -->
							<!-- status 3 已上课
							status 2 请假
							status 1 未上课 -->
							
							<view  class="todayDate " style="color: #999;" v-if="item.status == 1">未上课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 2">请假</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 3">已上课</view>
							<view  class="todaybotton " style="color: #EB4751;" v-if="item.status == 1">
								<u-button text="去点名" shape="circle" color="linear-gradient(0deg, #635df7 , #908cf6 )"
									customStyle="width: 174rpx; height: 60rpx;"></u-button>
							</view>
						</view>
					</view>
					<!-- train_enum_id == 1  短训培训班-->
					<!-- train_enum_id == 2 长训-->
					<!-- train_enum_id == 3 小班-->
					<view  class="dataList" v-if="train_enum_id == 2">
						<view class="card" :class="['card-'+item.status]" :key="item" v-for="(item,index) in class_timeslist" @click="classDetails(item,index)">
							<view class="topBox">
								<view class="title">
									<text>{{item.name}} | {{item.train_content}}</text>
								</view>
							</view>
							<view class="bottomBox ">
								<!-- <view class="time-1">2021/05/10</view> -->
								<view class="time-2">{{item.course_date}} {{item.period_time}}</view>
							</view>
							<!-- <view class="todayDate " :class="['todayDate-'+index]">
								<text>今日上课</text>
							</view> -->
							<view  class="todayDate " style="color: #999;" v-if="item.status == 1">未上课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 2">请假</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 3">已上课</view>
						</view>
					</view>
					<!-- train_enum_id == 1  短训培训班-->
					<!-- train_enum_id == 2 长训-->
					<!-- train_enum_id == 3 小班 排课-->
					<!-- class_mode_id = 2 是排课模式 -->
					<view  class="dataList"  v-if="train_enum_id == 3 && class_mode_id == 1">
						<view class="card" :class="['card-'+item.status]" :key="item" v-for="(item,index) in class_timeslist" @click="classDetails(item,index)">
							<view class="topBox">
								<view class="title">
									<text>{{item.name}} | {{item.train_content}}</text>
								</view>
							</view>
							<view class="bottomBox ">
								<!-- <view class="time-1">2021/05/10</view> -->
								<view class="time-2">{{item.course_date}} {{item.period_time}}</view>
							</view>
							<!-- <view class="todayDate " :class="['todayDate-'+index]">
								<text>今日上课</text>
							</view> -->
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 1 && item.has_appoint == 2">未约课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 1 && item.has_appoint == 1">未上课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 2">请假</view>
							<view  class="todayDate " style="color: #999;" v-if="item.status == 3">已上课</view>
						</view>
					</view>
					<!-- train_enum_id == 1  短训培训班-->
					<!-- train_enum_id == 2 长训-->
					<!-- train_enum_id == 3 小班 约课-->
					<!-- is_appointment      1 未约课 2 已约课 -->
					<!-- class_mode_id = 2 是约课模式 -->
					<view  class="dataList"  v-if="train_enum_id == 3 && class_mode_id == 2">
						<view class="card" :class="['card-'+item.status]" :key="item" v-for="(item,index) in class_timeslist" @click="classDetails(item,index)">
							<view class="topBox">
								<view class="title">
									<text>{{item.name}} | {{item.train_content}}</text>
								</view>
							</view>
							<view class="bottomBox ">
								<!-- <view class="time-1">2021/05/10</view> -->
								<view class="time-2">{{item.course_date}} {{item.period_time}}</view>
							</view>
							<!-- <view class="todayDate " :class="['todayDate-'+index]">
								<text>今日上课</text>
							</view> -->
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 1 && item.is_appointment == 2">未约课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 1 && item.is_appointment == 1">未上课</view>
							<view  class="todayDate " style="color: #EB4751;" v-if="item.status == 2">请假</view>
							<view  class="todayDate " style="color: #999;" v-if="item.status == 3">已上课</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="学员">
					<!-- 学员列表 -->
					<view class="students">
						<view class="peopleNum">
							<view class="line"></view>
							<text>本课程学员(52人,男23人,女29人)</text>
						</view>
						<view class="studentsInfo" v-for="(item,index) in studentslist" :key="item" @click="openStudent(item,index)">
							<view class="avatar">
								<van-image
									:src="item.head_img"
									mode="aspectFit" width="84rpx" height="84rpx" round />
								<view class="age age-1" v-if="item.sex == 2">
									<text>{{item.age}}</text>
								</view>
								<view class="age age-2" v-if="item.sex == 1">
									<text>{{item.age}}</text>
								</view>
							</view>
							<view class="identification">
								<view class="name">
									<text>{{item.name}}</text>
								</view>
								<text class="studentNumber">
									<text>学号:{{item.student_no}}</text>
								</text>
							</view>
							<!-- <view :class="[{'classNum': index == 0},{'absenceFromDuty': index != 0}]">
								<text>{{item.already_in_class}}/{{item.hour_num}} 已上课</text>
							</view> -->
							<view class="classNum">
								<text>{{item.already_in_class}}/{{item.hour_num}} 已上课</text>
							</view>

						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>

	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import circleProgressBar from "@/page_admin/components/circle-progress-bar/circle-progress-bar.vue"
	// /components/circle-progress-bar/circle-progress-bar.vue
	export default {
		components: {
			circleProgressBar
		},
		data() {
			return {
				date: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/74a428ff6a162986ee5f8d66d565c0fe2af5d593.png',
				address: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/82cc9b47584387e2fdb3472c13687c14bf9a1e44.png',
				pro: 0.9,
				tabIndex: 0,
				classHour: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7ffa97dd5d09012375992649443218cd8d9a15b0.png',
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				coach_id:"",
				class_id:'',
				class_timeslist:[],
				train_enum_id:'',
				class_mode_id:'',
				classInfo:{},
				studentslist:[],
				trainInfo:{}
			};
		},
		onLoad(options) {
			this.coach_id = options.coach_id
			this.class_id = options.class_id
			this.train_enum_id = options.train_enum_id
			this.class_mode_id = options.class_mode_id
			this.class_times()
		},
		methods: {
			// 班级课节列表
			async class_times() {
				let that = this;
				let params = {
					app_id: this.$https.weixinAppId,
					coach_id: this.coach_id,
					class_id: this.class_id,
				};
				let res = await personal.class_times(params);
				if (res.code == 1) {
					this.class_timeslist = res.data.list
					this.classInfo = res.data.classInfo
					this.trainInfo = res.data.trainInfo
				}
			},
			// 学员课节列表
			async students() {
				let that = this;
				let params = {
					app_id: this.$https.weixinAppId,
					class_id: this.class_id,
				};
				let res = await personal.students(params);
				if (res.code == 1) {
					this.studentslist = res.data.students
				}
			},
			classDetails(item) {
				uni.navigateTo({
					url: '/page_admin/coach-side/class-home/class-deail/class-deail?class_hour_id=' + item.id  + "&class_id=" + this.class_id + "&name=" + item.name
				})
			},
			tabClick(event) {
				this.tabIndex = event.detail.index
				let tabIndex = event.detail.index
				if (tabIndex == 0) {
					this.class_times()
				} else{
					this.students()
				}
				wx.pageScrollTo({
				  duration: 0,
				  scrollTop: 0,
				})
			},
			openStudent(item){
				uni.navigateTo({
					url:"/page_admin/coach-side/class-home/students-detail/students-detail?student_id=" + item.id  + "&class_id=" + this.class_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control{
		display: flex;
		flex-direction: column;
		height: 100vh;
	  }
	.navBackground {
		width: 100%;
		padding: 55rpx 29rpx 155rpx 60rpx;
		height: 400rpx !important;
		background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(144, 140, 246) 100%);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		// background-color: aqua;
		

		.title {
			background-color: #fff;
			font-size: 24rpx;
			color: rgb(255, 143, 5);
			align-self: flex-start;
			font-weight: 500;
			padding: 9rpx 10rpx 11rpx;
			border-radius: 20.5rpx;
		}

		.bottomBox {
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;

			.date {
				font-size: 24rpx;
				font-weight: 500;
				white-space: nowrap;
				color: #fff;
				padding-right: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					margin-left: 10rpx;
				}
			}

			.address {
				font-size: 24rpx;
				font-weight: 500;
				white-space: nowrap;
				color: #fff;
				padding-right: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.circleProgress {
			position: absolute;
			right: 20rpx;
			color: orange;
			font-size: 24rpx;
			white-space: nowrap;
			bottom: 20rpx;
		}
	}


.tabsBigBox{
	// margin-top: 60rpx;
}
	.dataList {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 0px 30rpx;

		.card {
			width: 100%;
			height: 250rpx;
			padding: 15rpx 0 23rpx 20rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			margin-top: 40rpx;
			position: relative;
			background-image: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/22afbf7eef382adf7367e290a79b34213fc47b2f.png');
			background-size: 100% 100%;

			.topBox {
				display: flex;

				.title {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					background-color: rgba(85, 190, 243, 0.2);
					padding: 5rpx 20rpx 5rpx;
					border-radius: 20.5rpx;
				}
			}

			.bottomBox {
				position: absolute;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				font-size: 20rpx;
				padding: 15rpx 0 23rpx 20rpx;

				.time-1 {
					color: rgb(153, 153, 153);
					font-size: 22rpx;
				}

				.time-2 {
					margin-top: 19rpx;
					color: rgb(51, 51, 51);
					font-size: 26rpx;
					font-weight: 700;
				}

			}

			.todayDate {
				color: rgb(255, 255, 255);
				font-size: 22rpx;
				font-weight: 500;
				white-space: nowrap;
				// background-color: rgb(250, 76, 76);
				padding: 10rpx 10rpx 10rpx;
				position: absolute;
				right: 0;
				top: 15rpx;
				border-radius: 25.5rpx 0px 0px 25.5rpx;
			}
			
			.todaybotton{
				position: absolute;
				right: 10rpx;
				bottom: 15rpx;
			}

			.todayDate-1 {
				color: rgb(235, 71, 81);
				font-size: 24rpx;
				background-color: transparent !important;

			}

		}
		.card-1 {
			background-image: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e2cf0f20cb0731b72d1f6f8653579c6c7f2186e3.png');
		}

		.card-2 {
			background-image: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/ba86fdd0eb7292d1fa00266a4e2f8eebafce39f7.png');
		}

		.card-3 {
			background-image: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/35d0198e9b7c60718bec607a8e74525140965656.png');
		}
	}

	.students {
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		
		.peopleNum {
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			white-space: nowrap;
			font-weight: bold;

			.line {
				background-color: rgb(99, 93, 247);
				border-radius: 3rpx;
				width: 6rpx;
				height: 30rpx;
				margin-right: 22rpx;
			}
		}

		.studentsInfo {
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #c8c9cc;
			position: relative;
			 padding: 28rpx 0rpx 23rpx 0rpx;
			 &:last-of-type{
				 border: none;
			 }

			.avatar {
				position: relative;
				.age {
					position: absolute;
					padding: 3rpx 0 3rpx;
					width: 60rpx;
					text-align: center;
					background-color: rgb(47, 117, 250);
					border-radius: 30rpx;
					color: rgb(255, 255, 255);
					font-size: 22rpx;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -5rpx;
					height: 30rpx;
				}
				.age-1{
					background-color: rgb(255,95,255);
				}
				.age-2{
					background-color: rgb(47, 117, 250);
				}
			}

			.identification {
				display: flex;
				flex-direction: column;
				margin-left: 21rpx;
				align-self: center;

				.name {
					font-size: 26rpx;
				}

				.studentNumber {
					margin-top: 30rpx;
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 23rpx;
					white-space: nowrap;
				}
			}

			.classNum {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				color: rgb(97, 190, 51);
				font-size: 24rpx;
				font-weight: 500;
				white-space: nowrap;
			}

			.absenceFromDuty {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				color: rgb(235, 71, 81);
				font-size: 24rpx;
				font-weight: 500;
				white-space: nowrap;
			}
		}
	}
</style>
